---
image: /generated/articles-docs-lottie-getlottiemetadata.png
id: getlottiemetadata
title: getLottieMetadata()
crumb: "@remotion/lottie"
---

_Part of the [`@remotion/lottie`](/docs/lottie) package._

Using this function, you can get the basic metadata such as dimensions, duration and framerate of a Lottie animation.

```tsx twoslash title="Animation.tsx"
// @allowUmdGlobalAccess
// @filename: animation.ts
export const animationData = {
  v: "5.9.6",
  fr: 29.9700012207031,
  ip: 0,
  op: 90.0000036657751,
  w: 1920,
  h: 1080,
  nm: "Comp 1",
  ddd: 0,
  assets: [],
  layers: [
    {
      ddd: 0,
      ind: 1,
      ty: 4,
      nm: "Shape Layer 1",
      sr: 1,
      ks: {
        o: { a: 0, k: 100, ix: 11 },
        r: {
          a: 1,
          k: [
            {
              i: { x: [0.833], y: [0.833] },
              o: { x: [0.167], y: [0.167] },
              t: 0,
              s: [360],
            },
            { t: 58.0000023623884, s: [0] },
          ],
          ix: 10,
        },
        p: {
          a: 1,
          k: [
            {
              i: { x: 0.833, y: 0.833 },
              o: { x: 0.167, y: 0.167 },
              t: 0,
              s: [979.401, 1368, 0],
              to: [0, -138, 0],
              ti: [0, 138, 0],
            },
            { t: 58.0000023623884, s: [979.401, 540, 0] },
          ],
          ix: 2,
          l: 2,
        },
        a: { a: 0, k: [517.365, 112.096, 0], ix: 1, l: 2 },
        s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 },
      },
      ao: 0,
      shapes: [
        {
          ty: "gr",
          it: [
            {
              ty: "rc",
              d: 1,
              s: { a: 0, k: [425.883, 425.883], ix: 2 },
              p: { a: 0, k: [0, 0], ix: 3 },
              r: { a: 0, k: 98, ix: 4 },
              nm: "Rectangle Path 1",
              mn: "ADBE Vector Shape - Rect",
              hd: false,
            },
            {
              ty: "st",
              c: { a: 0, k: [1, 1, 1, 1], ix: 3 },
              o: { a: 0, k: 100, ix: 4 },
              w: { a: 0, k: 2, ix: 5 },
              lc: 1,
              lj: 1,
              ml: 4,
              bm: 0,
              nm: "Stroke 1",
              mn: "ADBE Vector Graphic - Stroke",
              hd: false,
            },
            {
              ty: "fl",
              c: { a: 0, k: [0, 0.468933612108, 1, 1], ix: 4 },
              o: { a: 0, k: 100, ix: 5 },
              r: 1,
              bm: 0,
              nm: "Fill 1",
              mn: "ADBE Vector Graphic - Fill",
              hd: false,
            },
            {
              ty: "tr",
              p: { a: 0, k: [494.618, 123.481], ix: 2 },
              a: { a: 0, k: [0, 0], ix: 1 },
              s: { a: 0, k: [100, 100], ix: 3 },
              r: { a: 0, k: 0, ix: 6 },
              o: { a: 0, k: 100, ix: 7 },
              sk: { a: 0, k: 0, ix: 4 },
              sa: { a: 0, k: 0, ix: 5 },
              nm: "Transform",
            },
          ],
          nm: "Rectangle 2",
          np: 3,
          cix: 2,
          bm: 0,
          ix: 1,
          mn: "ADBE Vector Group",
          hd: false,
        },
      ],
      ip: 0,
      op: 90.0000036657751,
      st: 0,
      ct: 1,
      bm: 0,
    },
    {
      ddd: 0,
      ind: 2,
      ty: 1,
      nm: "White Solid 1",
      sr: 1,
      ks: {
        o: { a: 0, k: 100, ix: 11 },
        r: { a: 0, k: 0, ix: 10 },
        p: { a: 0, k: [960, 540, 0], ix: 2, l: 2 },
        a: { a: 0, k: [960, 540, 0], ix: 1, l: 2 },
        s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 },
      },
      ao: 0,
      sw: 1920,
      sh: 1080,
      sc: "#ffffff",
      ip: 0,
      op: 90.0000036657751,
      st: 0,
      bm: 0,
    },
  ],
  markers: [],
};

// @filename: Animation.tsx
import { animationData } from "./animation";

// ---cut---
import { getLottieMetadata } from "@remotion/lottie";

// animationData is a JSON object, can be imported from a .json file, remote file or using staticFile()
const metadata = getLottieMetadata(animationData);

/*
{
  durationInFrames: 90,
  durationInSeconds: 3.0030030030030037,
  fps: 29.9700012207031,
  height: 1080,
  width: 1920,
}
*/
```

## API

The function takes one argument, a JavaScript object that adheres to the Lottie schema.

### Return value

If the metadata cannot be parsed, this function returns `null`.

If the metadata can be parsed, it returns an object with the following properties:

#### `height`

The natural height of the animation in pixels.

#### `width`

The natural width of the animation in pixels.

#### `durationInSeconds`

The duration of the animation in seconds, if the `fps` from this object is used.

#### `durationInFrames`

The duration of the animation in frames, if the `fps` from this object is used.

:::note
This value is rounded down to the closest integer, since Remotion does not support non-integer values for `durationInFrames`.
:::

#### `fps`

The natural framerate of the Lottie animation.

## See also

- [Change Remotion composition metadata based on Lottie metadata](/docs/dynamic-metadata)
